<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>v-model指令</h3>
        <!-- 
            v-model 指令被叫做语法糖指令，语法糖指令由 v-bind + v-on 整合而成的一个双向操作指令
            v-model 指令的使用限制
                + 不能使用于表单操作元素和组件元素以外的其它元素
                + 取值只能是一个仓库响应式数据变量
        -->
        <p>msg:{{ msg }}</p>
        <input type="text" :value="msg" @input=" msg=$event.target.value ">
        <br>
        <input type="text" v-model="msg">
        <br><br>
        <!-- <div v-model="msg">报错</div> -->
        <!-- 
            <input type="text" v-model=" msg+'.end' ">
            <input type="text" v-bind:value=" msg+'.end' " v-on:input=" msg+'.end'=$event.target.value "> 
        -->
        <h4>输入型 input textarea [h5新增的表单标签都属于输入标签]</h4>
        <ol>
            <li>以指定变量完成输入表单元素的DOM属性value的取值绑定</li>
            <li>以指定变量作为赋值变量,完成标签的事件绑定和变量赋值操作</li>
        </ol>
        <p>info:{{ info }}</p>
        <input type="text" v-bind:value="info" v-on:input=" info=$event.target.value ">
        <input type="text" v-model="info">
        <br><br>
        <pre>{{text}}</pre>
        <textarea cols="30" rows="10" v-bind:value="text" v-on:input=" text=$event.target.value "></textarea>
        <textarea cols="30" rows="10" v-model="text"></textarea>
        <br><br>
        <p>num:{{ num }}</p>
        <input type="range" min="0" max="10" step="1" :value="num" @input=" num=$event.target.value ">
        <input type="range" min="0" max="10" step="1" v-model="num">
        <br><br>
        <p>color:{{ color }}</p>
        <input type="color" :value="color" @input=" color=$event.target.value ">
        <input type="color" v-model="color">
        <br><br>
        <p>day:{{ day }}</p>
        <input type="date" :value="day" @input=" day=$event.target.value ">
        <input type="date" v-model="day">

        <h4>选择型 select</h4>
        <ol>
            <li>以指定变量完成输入表单元素的DOM属性value的取值绑定</li>
            <li>以指定变量作为赋值变量,完成标签的事件绑定和变量赋值操作</li>
            <li>当options标签未提供value属性时,下拉列表选中项返回的是标签内容</li>
        </ol>
        <p>selectValue:{{ selectValue }}</p>
        <select :value="selectValue" @change=" selectValue=$event.target.value ">
            <option value="" disabled>请选择</option>
            <option value="A">a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option >d</option>
            <option >e</option>
        </select>
        <select v-model="selectValue">
            <option value="" disabled>请选择</option>
            <option value="A">a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option >d</option>
            <option >e</option>
        </select>

        <h4>选择型 input:radio</h4>
        <!-- <div>
            <input type="radio" value="A" name="a"> 选项A <br>
            <input type="radio" value="B" name="a"> 选项B <br>
            <input type="radio" value="C" name="a" checked> 选项C <br>
            <input type="radio" value="D" name="a"> 选项D <br>
        </div> -->
        <p>radioValue:{{ radioValue }}</p>
        <ol>
            <li>以指定变量完成选择表单元素的DOM属性checked的取值比较绑定</li>
            <li>比较值以单选按钮的value属性静态提供</li>
            <li>以指定变量作为赋值变量,完成标签的事件绑定和变量赋值操作</li>
        </ol>
        <div>
            <input type="radio" value="A" :checked=" radioValue=='A' " @change=" radioValue=$event.target.value "> 选项A <br>
            <input type="radio" value="B" :checked=" radioValue=='B' " @change=" radioValue=$event.target.value "> 选项B <br>
            <input type="radio" value="C" :checked=" radioValue=='C' " @change=" radioValue=$event.target.value "> 选项C <br>
            <input type="radio" value="D" :checked=" radioValue=='D' " @change=" radioValue=$event.target.value "> 选项D <br>
        </div>
        <br>
        <div>
            <input type="radio" value="A" v-model="radioValue"> 选项A <br>
            <input type="radio" value="B" v-model="radioValue"> 选项B <br>
            <input type="radio" value="C" v-model="radioValue"> 选项C <br>
            <input type="radio" value="D" v-model="radioValue"> 选项D <br>
        </div>
        <br>
        <p>radioValue1:{{ radioValue1 }}</p>
        <div>
            <label  v-for=" label in radioList ">
                <input type="radio" :value=" label " v-model="radioValue1"> {{ label }}
                <br>
            </label>
        </div>
        <br>
        <p>radioValue2:{{ radioValue2 }}</p>
        <div>
            <label  v-for=" item in radioListObj ">
                <input type="radio" :value=" item.value " v-model="radioValue2"> {{ item.label }}
                <br>
            </label>
        </div>

        <h4>选择型 input:checkbox</h4>
        <h5>状态选择</h5>
        <ol>
            <li>v-model完成checkbox元素的绑定时,当取值为非数组或set集合类型数据时,启用状态模式</li>
            <li>以指定变量完成选择表单元素的DOM属性checked的取值比较绑定</li>
            <li>以指定变量作为赋值变量,完成标签的事件绑定和变量赋值操作[状态]</li>
            <li>状态的控制默认使用 DOM 的checked属性提供结果,但如果定义了辅助属性 true-value,false-value,将覆盖默认规则</li>
        </ol>
        <p>flag:{{ flag }}</p>
        <input type="checkbox" :checked="flag" @change=" flag=$event.target.checked ">
        <input type="checkbox" v-model="flag">
        <p>flag1:{{ flag1 }}</p>
        <input type="checkbox" :checked="flag1=='是'" @change=" flag1=($event.target.checked?'是':'否')">
        <input type="checkbox" true-value="是" false-value="否" v-model="flag1">

        <h5>数据选择</h5>
        <ol>
            <li>v-model完成checkbox元素的绑定时,当取值为数组或set集合类型数据时,启用数据模式</li>
            <li>以指定变量完成选择表单元素的DOM属性checked的取值比较绑定</li>
            <li>比较值以单选按钮的value属性静态提供</li>
            <li>以指定变量作为存储操作变量,完成标签的事件绑定和变量添加或删除操作</li>
        </ol>
        <p>checkArr:{{ checkArr }}</p>
        <div>
            <input type="checkbox" value="A" :checked=" checkArr.includes('A') " @change="chooseCheckArr($event.target)"> 选项A <br>
            <input type="checkbox" value="B" :checked=" checkArr.includes('B') " @change="chooseCheckArr($event.target)"> 选项B <br>
            <input type="checkbox" value="C" :checked=" checkArr.includes('C') " @change="chooseCheckArr($event.target)"> 选项C <br>
            <input type="checkbox" value="D" :checked=" checkArr.includes('D') " @change="chooseCheckArr($event.target)"> 选项D <br>
        </div>
        <br>
        <div>
            <input type="checkbox" value="A" v-model="checkArr"> 选项A <br>
            <input type="checkbox" value="B" v-model="checkArr"> 选项B <br>
            <input type="checkbox" value="C" v-model="checkArr"> 选项C <br>
            <input type="checkbox" value="D" v-model="checkArr"> 选项D <br>
        </div>
        <p>checkSet:{{ checkSet }}</p>
        <div>
            <input type="checkbox" value="A" :checked=" checkSet.has('A') " @change="chooseCheckSet($event.target)"> 选项A <br>
            <input type="checkbox" value="B" :checked=" checkSet.has('B') " @change="chooseCheckSet($event.target)"> 选项B <br>
            <input type="checkbox" value="C" :checked=" checkSet.has('C') " @change="chooseCheckSet($event.target)"> 选项C <br>
            <input type="checkbox" value="D" :checked=" checkSet.has('D') " @change="chooseCheckSet($event.target)"> 选项D <br>
        </div>
        <br>
        <div>
            <input type="checkbox" value="A" v-model="checkSet"> 选项A <br>
            <input type="checkbox" value="B" v-model="checkSet"> 选项B <br>
            <input type="checkbox" value="C" v-model="checkSet"> 选项C <br>
            <input type="checkbox" value="D" v-model="checkSet"> 选项D <br>
        </div>
        <hr>
        <p>用于构建复选按钮数量:size:{{ size }}</p>
        <p>记录用户的选择:chooseSize:{{ chooseSize }}</p>
        <div>
            <label v-for="text in size">
                <input type="checkbox" :value="text" v-model="size">{{ text }}
            </label>
            <br>
            <label v-for="text in size">
                <input type="checkbox" :value="text" v-model="chooseSize">{{ text }}
            </label>
        </div>
        <hr>
        <p>types:{{ types }}</p>
        <div>
            <label v-for="obj in types">
                <input type="checkbox" v-model="obj.state">{{ obj.type }}
            </label>
        </div>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    msg:"msg",
                    info:"info",
                    text:"aaa\nbbb",
                    num:5,
                    color:"#00ff00",
                    day:"2023-01-23",
                    selectValue:"",
                    radioValue:"D",
                    radioValue1:"选项C",
                    radioList:["选项A","选项B","选项C","选项D"],
                    radioValue2:"",
                    radioListObj:[
                        { label:"选项A",value:"A"},
                        { label:"选项B",value:"B"},
                        { label:"选项C",value:"C"},
                        { label:"选项D",value:"D"}
                    ],
                    flag:true,
                    flag1:"是",
                    checkArr:["A","D"],
                    checkSet:new Set(["B","C"]),
                    chooseSize:[],
                    size:["14吋","黑色","智能"],
                    types:[
                        { type:"String" },
                        { type:"Number" },
                        { type:"Array" }
                    ]
                }
            },
            methods:{
                chooseCheckArr(checkDom){
                    if(checkDom.checked){
                        this.checkArr.push(checkDom.value);
                    }else{
                        let i = this.checkArr.indexOf(checkDom.value);
                        this.checkArr.splice(i,1)
                    }
                },
                chooseCheckSet(checkDom){
                    if(checkDom.checked){
                        this.checkSet.add(checkDom.value)
                    }else{
                        this.checkSet.delete(checkDom.value)
                    }
                }
            }
        }).mount("#app")
    </script>
</body>
</html>